<template>
	<view class="tui-product__item" @tap="detail(entity.id)">
		<view class="tui-product__img">
			<image :src="ossUrl + entity.masterImg" class="tui-product__img" mode="widthFix"></image>
			<tui-tag type="white" size="20rpx" class="tui-product__address" shape="circle" :plain="true"
				padding="5px 8px" border="unset" v-if="isPos">
				<tui-icon name="gps" :size="20" unit="rpx" color="#fff" margin="0 8rpx 0 0"></tui-icon>
				{{entity.poi ? entity.poi.businessAreaName : '未知'}}
			</tui-tag>
			<tui-tag type="white" size="20rpx" class="tui-product__address" shape="circle" :plain="true"
				padding="5px 8px" border="unset" v-if="isDate">
				<tui-icon name="clock" :size="20" unit="rpx" color="#fff" margin="0 8rpx 0 0"></tui-icon>
				2024-11-02
			</tui-tag>
		</view>
		<view class="tui-product__content">
			<view class="tui-product__title">{{ entity.merchantName || '' }}</view>
			<view class="tui-product__pay">
				<tui-icon name="clock" :size="30" unit="rpx" margin="0 8rpx 0 0"></tui-icon>
				{{entity.startTime}}-{{entity.endTime}}
			</view>
			<view class="tui-product__pay" style="margin-top: 18rpx;">
				<image src="/static/user/index/icon_juli@2x.png"></image>
				{{entity.distance}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'MerchantItem',
		emits: ['clickDetail'],
		props: {
			//数据obj
			entity: {
				type: Object,
				default () {
					return {};
				}
			},
			// 是否显示位置
			isPos: {
				type: Boolean,
				default: true
			},
			// 是否显示日期
			isDate: {
				type: Boolean,
				default: false
			},
			//oss
			ossUrl:{
				type: String,
				default:''
			}
		},
		data() {

		},
		methods: {
			detail(id) {
				this.$emit("clickDetail", {
					id
				})
			}
		}
	};
</script>

<style>
	.tui-product__item {
		width: 100%;
		margin-bottom: 10rpx;
		background: #fff;
		box-sizing: border-box;
		border-radius: 28rpx;
		overflow: hidden;
		transition: all 0.15s linear;
	}

	.tui-product__item-show-border {
		border: 1rpx solid #cccccc47;
	}

	.tui-product__img {
		position: relative;
		width: 100%;
		display: block;
		background-color: #F1F1F1;
	}

	.tui-product__address {

		background-color: #2e2e2e5c;
		position: absolute;
		bottom: 20rpx;
		left: 16rpx;
		border-radius: 160rpx;
	}

	.tui-product__address text {
		font-size: 20rpx;
		color: #fff;
		margin-left: 8rpx;
	}

	.tui-product__content {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 20rpx;
	}

	.tui-product__title {
		color: #2e2e2e;
		font-size: 30rpx;
		line-height: 32rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-weight: 600;
		margin-bottom: 18rpx;
	}

	.tui-product__pay {
		display: flex;
		align-items: center;
		font-size: 26rpx;
		color: #656565;
	}

	.tui-product__pay image {
		width: 32rpx;
		height: 32rpx;
		margin-right: 8rpx;
	}
</style>